<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">

              <a-col :md="8" :sm="8">
                <a-form-item :label="$t('base.name')">
                  <j-input :placeholder="$t('base.inputVagueQuery')" v-model="queryParam.name"></j-input>
                </a-form-item>
              </a-col>

              <a-col :md="8" :sm="8">
                <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search"> {{$t('base.query')}} </a-button>
                  <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px"> {{$t('base.reset')}} </a-button>
                </span>
              </a-col>

            </a-row>
          </a-form>
        </div>
        <!-- 查询区域-END -->

        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          :rowSelection="{fixed:true,selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          @change="handleTableChange">
          <template slot="avatarslot" slot-scope="text, record, index">
            <div class="anty-img-wrap">
              <img src="@/assets/img/zaixian.png" v-show="record.status=='Idle'"/>
              <img src="@/assets/img/lixian.png" v-show="record.status=='Offline'"/>
              <img src="@/assets/img/working.png" v-show="record.status=='Working'"/>
            </div>
          </template>
        </a-table>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>

  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue,filterObj } from '@/utils/util'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import JInput from '@/components/jeecg/JInput'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'

  export default {
    name: "GlrRadioTaskMembeRadio",
    mixins:[JeecgListMixin],
    components: {
      JDictSelectTag,
      JInput
    },
    data () {
      return {
        disableMixinCreated:true,
        form: this.$form.createForm(this),
        title:this.$t('radio.terminalMember'),
        width:800,
        visible: false,
        taskId:"",
        memberType:"",
        model: {},
        companyCode:'',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:this.$t('base.name'),
            align:"center",
            dataIndex: 'name'
          },
          {
            title:this.$t('base.status'),
            align:"center",
            scopedSlots: {customRender: "avatarslot"}
          },
          {
            title: this.$t('radio.volume'),
            align:"center",
            dataIndex: 'vol'
          },
          {
            title:this.$t('radio.belongingRadio'),
            align:"center",
            dataIndex: 'companyCode_dictText'
          },
          {
            title:this.$t('radio.belongingType'),
            align:"center",
            dataIndex: 'terminalType_dictText'
          },
          {
            title:this.$t('radio.installDate'),
            align:"center",
            dataIndex: 'installDate',
            customRender:function (text) {
              return !text?"":(text.length>10?text.substr(0,10):text)
            }
          }
        ],
        confirmLoading: false,
        validatorRules: {
          memberId: {rules: [
              {required: true, message: '请输入成员ID!'},
            ]},
          memberType: {rules: [
              {required: true, message: '请输入成员类型!'},
            ]},
          taskId: {rules: [
              {required: true, message: '请输入任务ID!'},
            ]},
          sysCompanyCode: {rules: [
            ]},
        },
        url: {
          list: "/glr/glrRadioTaskMember/TaskRadiolist",
          add: "/glr/glrRadioTaskMember/add",
          edit: "/glr/glrRadioTaskMember/edit",
          bingRadio:"/glr/glrRadioTaskMember/bingRadio",
        }
      }
    },
    created () {
    },
    methods: {
      add (taskId,companyCode) {
        this.selectedRowKeys=[];
        this.taskId=taskId;
        this.form.resetFields();
        this.visible = true;
        this.model.taskId=taskId;
        this.companyCode=companyCode;

        this.queryParam.taskId = this.taskId;
        this.queryParam.memberType=this.memberType;
        this.queryParam.companyCode=this.companyCode;
        this.ipagination.pageSize = 10;
        this.ipagination.pageSizeOptions = ['10','20', '60', '100'];

        this.loadData();
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'memberId','memberType','taskId','sysCompanyCode'))
        })
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        var ids = "";
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning(this.$t('base.pleaseSelectARecord'));
          return;
        } else {
          for (var a = 0; a < this.selectedRowKeys.length; a++) {
            ids += this.selectedRowKeys[a] + ",";
          }
          let httpurl = '';
          let method = '';
          httpurl += that.url.bingRadio;
          method = 'post';
          httpAction(httpurl, {ids:ids,taskId:that.taskId}, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message);
              that.$emit('ok');
            } else {
              that.$message.warning(res.message);
            }
          }).finally(() => {
            that.confirmLoading = false;
            that.close();
          })
        }
      },
      handleCancel () {
        this.close()
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'memberId','memberType','taskId','sysCompanyCode'))
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>